//路由的使用， 编程式导航，声明式导航

import React, { useState } from "react";
import Link from 'next/link';
import Router from 'next/router'
//输出圆扣号表示jsx,表示只有返回值，没有其他的业务逻辑，如果有就需要改成方括号

//query传递参数，
const Home=()=>{
    function goto() {
        Router.push("/router/jspangA")
    }
    function gotoXiaojiejie() {
        Router.push({
            pathname:'/router/xiaojiejie',
            query:{name:'翻车'}
        })
    }

    const [color,setColor] = useState('blue')

    const changeColor =()=>{
        setColor(color == 'blue' ? 'red' : 'blue')
    }
    return(
        <>
        <div className="Home">我是首页</div>
        <div><Link href="/router/jspangA"><a>去jspangA页面</a></Link></div>
        <div><Link href="/router/jspangB"><a>去jspangB页面</a></Link></div>
        <div><Link href={{pathname:'/router/xiaojiejie',query:{name:"小红"}}}><a>小红去读书</a></Link></div>
        <div><Link href="/router/xiaojiejie?name='小明'"><a>小明去读书</a></Link></div>
        
        
        <br />
        <div>
            <button onClick={goto}>点击跳转到jspangA</button> <br/>
            <button onClick={gotoXiaojiejie}>去小姐姐</button> <br/>
            <Link href="#router"><a>hash使用</a></Link>
            <button onClick={changeColor}>改变颜色</button>
        </div>

        <style jsx>
            {`
                .Home{background:${color};}
            `}
        </style>
    </>
    )
}

// const Home=()=>(
//     <>
//         <div>我是首页</div>
//         <div><Link href="/router/jspangA"><a>去jspangA页面</a></Link></div>
//         <div><Link href="/router/jspangB"><a>去jspangB页面</a></Link></div>
//         <br />
//         <div>
//             <button onClick={()=>{Router.push("/router/jspangA")}}>点击跳转到jspangA</button>
//         </div>
//     </>
// )

export default Home;